<template>
    <el-tabs v-model="activeTab" type="border-card" destroy-on-close="true" class="lucidity-note-setting-tabs">
        <!-- 外观设置 -->
        <el-tab-pane label="外观设置" name="appearance-setting" class="appearance-setting">
            <el-form
                :label-position="formLabelPosition"
                label-width="140px"
                :model="appearance"
                >

                <!-- <el-form-item label="窗体宽度">
                    <el-input-number v-model="appearance.appWidth" :min="1500"/>
                </el-form-item>

                <el-form-item label="窗体高度">
                    <el-input-number v-model="appearance.appHeight" :min="800"/>
                </el-form-item> -->

                <!-- <el-form-item label="窗体缩放模式">
                    <el-select v-model="appearance.appResize">
                        <el-option 
                            v-for="item in appResizes"
                            :key="item.pk"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"/>
                    </el-select>
                </el-form-item> -->

                <el-form-item label="主题模式">
                    <el-radio-group v-model="appearance.appTheme">
                        <el-radio-button label="light" name="明亮模式" />
                        <el-radio-button label="dark" name="黑暗模式" />
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="编辑器主题">
                    <el-select v-model="appearance.editorTheme">
                        <el-option
                            v-for="theme in editorThemes"
                            :key="theme"
                            :label="theme"
                            :value="theme" />
                    </el-select>
                </el-form-item>

                <el-form-item label="App背景模式">
                    <el-radio-group v-model="appearance.appBkMode">
                        <el-radio-button label="default" name="默认背景" />
                        <el-radio-button label="custom" name="自定义" />
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="默认背景" v-if="appearance.appBkMode === 'default'">
                    <el-select v-model="appearance.defaultBk">
                        <el-option
                            v-for="defaultBk in defaultBks"
                            :key="defaultBk.url"
                            :label="defaultBk.name"
                            :value="defaultBk.url" />
                    </el-select>
                </el-form-item>

                <el-form-item label="自定义背景" v-else>
                    <el-input v-model="appearance.customBk"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="saveAppearanceSetting()"> 更新外观设置 </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        <!-- 远程同步设置 -->
        <el-tab-pane label="远程同步设置" name="notebook-info">
            <el-form
                ref="gitSyncRef"
                :label-position="formLabelPosition"
                label-width="140px"
                :model="gitSyncSetting">

                <el-form-item label="Git提交用户名"
                    prop="username"
                    :rules="[{
                        required: true,
                        message: '请输入Git提交用户名',
                        trigger: 'blur',
                    }]">
                    <el-input v-model="gitSyncSetting.username"/>
                </el-form-item>

                <el-form-item label="Git提交邮箱"
                    prop="email"
                    :rules="[{
                        type: 'email',
                        message: '请输入正确的Git提交邮箱',
                        trigger: 'blur',
                    }]">
                    <el-input v-model="gitSyncSetting.email"/>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="checkGitSyncSetFormValidate()"> 更新GIt同步设置 </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

        <!-- 远程同步设置 -->
        <el-tab-pane label="笔记文本设置" name="notetext-info">
            <el-checkbox-group v-model="selectCheckboxs" size="small">
                <el-checkbox v-for="item in noteTextConfs" 
                    :key="item.name" 
                    :label="item.name"
                    :checked="item.enable"
                    :disabled="item.editable"
                    :title="`支持的后缀：${item.suffixs}`"
                    class="lucidity-note-checkbox-item"
                    @change="updateNoteText(item)"
                    border >
                    <!-- {{noteTextInfo.descript}} -->
                </el-checkbox>
            </el-checkbox-group>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {ref, reactive, toRefs, onMounted} from "vue";
    export default ({
        methods: {
            checkGitSyncSetFormValidate: function() {
                this.$refs.gitSyncRef.validate((valid, fields) => {
                    this.saveGitSyncSetting(valid, fields);
                })
            }
        },

        setup(props, {emit}) {
            const LUCIDITY_NOTE_APP_SETTINGS = reactive({
                activeTab: ref("appearance-setting"),
                gitSyncSetting: {},
                appearance: {},
                editorThemes: [],
                defaultBks: [],
                formLabelPosition: 'right',
                noteTextConfs: [],
                selectCheckboxs: [],
                appResizes: [
                    {pk: 1, label: "宽高可调节", value: 0x0},
                    {pk: 2, label: "宽高固定", value: 0x3},
                    {pk: 3, label: "可调节的最大", value: 0x2, disabled: true},
                    {pk: 4, label: "可调节的最小", value: 0x1, disabled: true}
                ]
            });

            const saveAppearanceSetting = () => {
                LucidityNoteApp.Helper.net.put(
                    "/user/setting/update/appearance",
                    LUCIDITY_NOTE_APP_SETTINGS.appearance,
                    (success) => {
                        ElementPlus.ElMessage({
                            type: "success",
                            message: `${success.message}:配置更新成功,刷新页面生效.`
                        });

                        // LucidityNoteApp.refreshBkImg(url)
                        // var url = `/assets/static/moudle/codemirror/theme/${LUCIDITY_NOTE_APP_SETTINGS.appearance.editorTheme}.css`
                        // LucidityNoteApp.changeJSScript("editor-theme", url);
                    },
                    (error) => {
                        ElementPlus.ElMessage.error(error.message)
                    }
                );
            };

            /**
             * 保存 Git 同步提交设置
             * @param {booleab} valid 校验检查是否通过
             * @param {json} fields 没有通过的校验信息
             */
            const saveGitSyncSetting = (valid, fields) => {
                if (valid) {
                    LucidityNoteApp.Helper.net.put(
                        "/user/setting/update/gitsync",
                        LUCIDITY_NOTE_APP_SETTINGS.gitSyncSetting,
                        (success) => {
                            ElementPlus.ElMessage({
                                type: "success",
                                message: success.message
                            });
                        },
                        (error) => {
                            ElementPlus.ElMessage.error(error.message)
                        }
                    );
                } else {
                    if (fields.username) {
                        ElementPlus.ElMessage.error(fields.username[0].message)
                    }

                    if (fields.email) {
                        ElementPlus.ElMessage.error(fields.email[0].message)
                    }
                }                
            };

            const updateNoteText = (noteTextConf) => {
                LucidityNoteApp.Helper.net.put(
                    "/user/setting/update/textinfo",
                    noteTextConf,
                    (response) => {
                        ElementPlus.ElMessage({
                            type: "success",
                            message: "更新文本配置成功"
                        });
                    },
                    (error) => {ElementPlus.ElMessage.error(error.message)}
                );
            };

            onMounted(() => {
                // 初始化当前组件初始化笔记本信息
                (function() {
                    LucidityNoteApp.Helper.net.get(
                        "/user/setting/appearance",
                        null,
                        (response) => {
                            LUCIDITY_NOTE_APP_SETTINGS.editorThemes = [];
                            LUCIDITY_NOTE_APP_SETTINGS.editorThemes.push.apply(LUCIDITY_NOTE_APP_SETTINGS.editorThemes, response.data.editorThemes.dark);
                            LUCIDITY_NOTE_APP_SETTINGS.editorThemes.push.apply(LUCIDITY_NOTE_APP_SETTINGS.editorThemes, response.data.editorThemes.light);

                            LUCIDITY_NOTE_APP_SETTINGS.defaultBks = [];
                            LUCIDITY_NOTE_APP_SETTINGS.defaultBks.push.apply(LUCIDITY_NOTE_APP_SETTINGS.defaultBks, response.data.defaultBks)

                            LUCIDITY_NOTE_APP_SETTINGS.appearance = {
                                // appWidth: response.data.appWidth,
                                // appHeight: response.data.appHeight,
                                // appResize: response.data.appResize,
                                appTheme: response.data.appTheme,
                                editorTheme: response.data.editorTheme,
                                appBkMode: response.data.appBkMode,
                                customBk: response.data.customBk,
                                defaultBk: response.data.defaultBk
                            }
                        }
                    );

                    LucidityNoteApp.Helper.net.get(
                        "/user/setting/gitsync",
                        null,
                        (response) => {
                            LUCIDITY_NOTE_APP_SETTINGS.gitSyncSetting = response.data
                        },
                        (error) => {ElementPlus.ElMessage.error(error.message)}
                    );

                    LucidityNoteApp.Helper.net.get(
                        "/user/setting/note/textinfo",
                        null,
                        (response) => {
                            LUCIDITY_NOTE_APP_SETTINGS.noteTextConfs = response.data
                        },
                        (error) => {ElementPlus.ElMessage.error(error.message)}
                    );
                })();
            });

            return {
                ...toRefs(LUCIDITY_NOTE_APP_SETTINGS),
                saveGitSyncSetting,
                saveAppearanceSetting,
                updateNoteText
            }
        }
    })
</script>

<style>
    .appearance-setting .el-input-number {
        height: 32px;
    }

    .lucidity-note-checkbox-item {
        margin: 5px 5px;
    }

    .lucidity-note-setting-tabs .el-tabs__content {
        max-height: 400px;
        overflow-y: auto;
    }
</style>